<template>
<div class="goodsOrderList">
  <search-block>
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
    </template>
    <el-form inline :model="model" label-width="80px">
      <el-form-item label="订单号:">
        <el-input v-model="model.orderSn" clearable></el-input>
      </el-form-item>
      <el-form-item label="下单人:">
        <el-input v-model="model.memberName" clearable></el-input>
      </el-form-item>
      <el-form-item label="提交时间:">
        <el-date-picker
          v-model="model.commitTime"
          clearable
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="{
            shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
              }
            }]
          }"></el-date-picker>
      </el-form-item>
      <el-form-item label="订单来源:">
        <el-select v-model="model.sourceType" clearable>
          <el-option
            v-for="item in orderSourceOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态:">
        <el-select v-model="model.orderStatus" clearable>
          <el-option
            v-for="item in orderStatusRealOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="精简模式:">
        <el-switch
          v-model="model.aggregate"
          :active-value="1"
          :inactive-value="0"
          active-text="开启"
          inactive-text="关闭"
          @change="changeAggregate"></el-switch>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :cell-class-name="setCellClassName"
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="orderStatus" label="订单状态" align="center" header-align="center" min-width="100">
      <template v-slot="{row}">
        <span v-if="row.orderStatus === 0" class="y-info">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
        <template v-else-if="row.orderStatus === 5">
          <span v-if="!row.remind" class="y-warning">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
          <el-popover v-else trigger="hover" :content="'催单次数：' + row.remind">
            <el-badge :value="row.remind" slot="reference">
              <span class="y-warning">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
            </el-badge>
          </el-popover>
        </template>
        <span v-else-if="row.orderStatus === 10" class="y-primary">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
        <span v-else-if="row.orderStatus === 15" class="y-success">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
        <span v-else-if="row.orderStatus === 25" class="y-danger">{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}</span>
        <span v-else>{{ $$getCommonArrayName(row.orderStatus, orderStatusOptions) }}  </span>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="200" fixed="right">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button size="mini" @click="showDetails(row)">查看订单</el-button>
          <template v-if="row.orderStatus === 0">
            <!--未付款-->
<!--            <el-button size="mini">关闭订单</el-button>-->
          </template>
          <template v-else-if="row.orderStatus === 5">
            <!--待付款-->
            <el-button size="mini" @click="showDelivery(row)">订单发货</el-button>
          </template>
          <template v-else-if="(row.orderStatus === 10 || row.orderStatus === 15) && !row.deliveryMode">
            <!--已发货，已完成-->
            <el-button size="mini" @click="showTracking(row)">订单跟踪</el-button>
          </template>
          <template v-if="row.orderStatus === 20 || row.orderStatus === 35">
            <!--TODO 暂不支持   已关闭，无效订单-->
<!--            <el-button size="mini" type="danger">删除订单</el-button>-->
          </template>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <el-drawer
    :visible.sync="viewForms.showForm"
    title="订单详情"
    :size="1000"
    destroy-on-close>
    <goods-order-info
      v-if="viewForms.currentForm && viewForms.currentForm.id"
      :order-id="viewForms.currentForm.id"
      @close-drawer="viewForms.showForm = false"
      @refresh="search(false)"></goods-order-info>
  </el-drawer>
  <el-dialog
    :visible.sync="deliveryForms.showForm"
    :key="deliveryRefreshKey"
    append-to-body
    width="800px"
    :title="deliveryForms.formTypeTitle[deliveryForms.formsType]"
    @closed="deliveryForms.currentForm = {};deliveryRefreshKey += 2">
    <goods-order-delivery
      v-if="deliveryForms.currentForm && deliveryForms.currentForm.id"
      ref="goodsOrderDelivery"
      :order-id="deliveryForms.currentForm.id"
      :delivery-mode="deliveryForms.currentForm.deliveryMode || 0"
      @refresh-tracking="deliveryRefreshKey += 2"></goods-order-delivery>
    <div class="dialog-footer" slot="footer">
      <el-button type="primary" @click="sendDelivery">{{ !deliveryForms.currentForm.deliveryMode ? '保存' : '拣货完成'}}</el-button>
    </div>
  </el-dialog>
  <el-dialog
    :visible.sync="trackingForms.showForm"
    :key="trackingRefreshKey"
    class="force-inner-scroll"
    width="800px"
    title="订单追踪"
    @closed="trackingForms.currentForm = {};deliveryRefreshKey += 2">
    <goods-order-tracking
      v-if="trackingForms.currentForm && trackingForms.currentForm.id"
      ref="goodsOrderTracking"
      :order-id="trackingForms.currentForm.id"
      :order-sn="trackingForms.currentForm.orderSn"
      :show-change="trackingForms.currentForm.orderStatus === 10"
      @change-delivery="row => showDelivery(row, 'EDIT')"></goods-order-tracking>
  </el-dialog>
</div>
</template>

<script>
import goodsOrderInfo from "./goodsOrderDetails/goodsOrderInfo";
import goodsOrderDelivery from "./goodsOrderDetails/goodsOrderDelivery";
import goodsOrderTracking from "./goodsOrderDetails/goodsOrderTracking";
export default {
  name: "goodsOrderList",
  components: { goodsOrderInfo, goodsOrderDelivery, goodsOrderTracking },
  inject: ['getEnum'],
  computed:{
    getDataWay(){
      return{
        dataType: 'url',
        data: this.$api.goods.goodsOrderList,
        param: this.model
      }
    },
    orderStatusRealOptions(){
      if(this.model.aggregate === 0){
        return this.orderStatusOptions;
      }else{
        return this.orderStatusOptions.filter(item => ![15, 20, 30, 35].includes(item.value));
      }
    }
  },
  data(){
    return {
      orderSourceOptions: this.getEnum('orderSource'),
      orderStatusOptions: this.getEnum('mallOrderStatus'),
      deliveryModeOptions: this.getEnum('deliveryMode'),
      deliveryRefreshKey: 0,
      trackingRefreshKey: 1,
      model:{
        commitTime: '',
        memberName: '',
        orderSn: '',
        sourceType: '',
        orderStatus: '',
        aggregate: 0
      },
      columns: [
        {
          prop: 'orderSn',
          label: '订单编号',
          minWidth: '180'
        },
        {
          label: "提交时间",
          prop: "commitTime",
          minWidth: '180',
          formatter(row){
            return (row.commitTime || '').replace('T', ' ');
          }
        },
        {
          label: "下单人",
          prop: "memberName",
          minWidth: '100'
        },
        {
          label: "支付金额(元)",
          prop: "payAmount",
          minWidth: '100'
        },
        {
          label: "支付方式",
          prop: "payType",
          minWidth: '100',
          formatter: (function(row){
            return this.$$getCommonArrayName(row.payType, Object.values(this.getEnum('commonPayType'))) || '无'
          }).bind(this)
        },
        {
          label: "订单来源",
          prop: "sourceType",
          minWidth: '120',
          formatter: (function(row){
            return this.$$getCommonArrayName(row.sourceType, this.orderSourceOptions)
          }).bind(this)
        },
        {
          label: "订单状态",
          prop: "orderStatus",
          template: true
        },
        {
          label: "物流方式",
          prop: "deliveryMode",
          minWidth: '100',
          formatter: (function(row){
            return this.$$getCommonArrayName(row.deliveryMode || 0, this.deliveryModeOptions)
          }).bind(this)
        }
      ],
      viewForms:{
        currentForm: {},
        showForm: false,
      },
      deliveryForms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '订单发货',
          'EDIT': '编辑物流信息'
        },
        currentForm: {},
        showForm: false,
      },
      trackingForms:{
        currentForm: {},
        showForm: false,
      }
    }
  },
  methods:{
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    showDetails(row){
      this.$set(this.viewForms, 'currentForm', row);
      this.viewForms.showForm = true;
    },
    showDelivery(row, type='ADD'){
      this.deliveryForms.formsType = type;
      this.$set(this.deliveryForms, 'currentForm', row);
      this.$nextTick(() => {
        this.deliveryForms.showForm = true;
      })
    },
    showTracking(row){
      this.$set(this.trackingForms, 'currentForm', row);
      this.$nextTick(() => {
        this.trackingForms.showForm = true;
      })
    },
    sendDelivery(){
      this.$refs['goodsOrderDelivery'].sendDelivery(this.deliveryForms.formsType, (function(){
        this.deliveryForms.showForm = false;
        this.search();
        if(this.deliveryForms.formsType === 'EDIT'){
          this.$refs['goodsOrderTracking'] && this.$refs['goodsOrderTracking'].initInfo && this.$refs['goodsOrderTracking'].initInfo();
        }
      }).bind(this));
    },
    changeAggregate(){
      if(this.model.aggregate === 1 && [15, 20, 30, 35].includes(this.model.orderStatus)){
        this.model.orderStatus = '';
      }
      this.search(true);
    },
    setCellClassName({row, column, rowIndex, columnIndex}){
      if(column.label === '订单状态'){
        return 'visible-cell'
      }
      return ''
    }
  }
}
</script>

<style scoped lang="less">
.goodsOrderList{
  .SearchBlock {
    /deep/ .el-form-item{
      width: calc(33.3333333333% - 10px);
      display: inline-flex;
      position: relative;
      .el-form-item__label{
        flex-shrink: 0;
      }
      .el-form-item__content{
        margin-bottom: 10px;
        .el-date-editor.el-input{
          width: auto;
        }
      }
    }
  }
  /deep/.el-badge__content{
    animation: blink 1000ms infinite;
  }
}
</style>
